import './style.scss'
import {Component} from 'react'
import {loginAdmin} from '../../api/admin'
import {message} from 'antd';
import withRouter from '../../util/withRouter'
import {connect} from 'react-redux'
import {setAdminInfo} from '../../store/adminSlice'

class Login extends Component {
    state = {
        name:'',
        pwd:''
    }
    handleLogin = async()=>{
        if(!this.state.name) return message.info('请填写正确的用户名')
        if(!this.state.pwd) return message.info('请填写正确的密码')
        let res = await loginAdmin({
            name:this.state.name,
            pwd:this.state.pwd
        })
        this.props.dispatch(setAdminInfo(res.data))
        message.info('登录成功')
        this.props.navigate('/index',{replace:true})
    }
    render(){
        return(
            <div className='loginPage'>
            <div className='loginbox'>
                <div>
                    <input placeholder='请输入账号' value={this.state.name} onChange={ ev=>this.setState({name:ev.target.value}) }/>  
                </div>
                <div>
                    <input placeholder='请输入密码' type="password" value={this.state.pwd}  onChange={ ev=>this.setState({pwd:ev.target.value}) } />  
                </div>
                <div>
                    <button onClick={ this.handleLogin }>立即登录</button>
                </div>
            </div>
        </div>
        )
    }
} 

const mapStateToProps = (state)=>({...state})
export default connect(mapStateToProps)(withRouter(Login))